<template>
  <div>
    <div style="z-index:3;margin-bottom:10px;">
        <el-breadcrumb separator-class="el-icon-arrow-right title">
            <el-breadcrumb-item :to="{ path: '/' }" style="font-size:20px;">首页</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">我</el-breadcrumb-item>
            <el-breadcrumb-item style="font-size:20px;">我的钱包</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <template>
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="当前余额" name="first"></el-tab-pane>
        <el-tab-pane label="消费信息" name="second"></el-tab-pane>
    </el-tabs>
    </template>
    <el-main>
      <router-view></router-view>
    </el-main>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  data(){
    return{
      activeName: 'first',
      userInfo: {
        roleId: null,
        username: '',
        gender: '',
        phoneNumber: "",
        money:null,
        address: ''
      },
    }
  },
  beforeCreate(){
    var token = localStorage.getItem("loginToken")
    this.$axios.get('/user/getUserInfo',{headers:{"token": token}})
    .then(res => {
      console.log(res)
      if(res.data.data != null){
        this.userInfo = res.data.data
      }
      if(this.userInfo.roleId != null){
        if(this.userInfo.roleId == 0 | this.userInfo.roleId == 1){
          this.role = true
          console.log(this.userInfo.roleId)
          console.log(this.role)
        }
      }
      // console.log(res)
    })
    .catch(err => {
      // console.error(err); 
    })
  },
  methods: {
    handleClick(tab,event){
        console.log(tab,event)
        if(tab.name == 'first'){
            this.$router.push("/CurrentBalance")
        }
        if(tab.name == 'second'){
            this.$router.push("/ConsumptionInfo")
        }
    }
  }
}
</script>

<style>

</style>
